<template>
  <!--个人中心-->
  <div id="user">
    <div class="left">
      <div class="top">
        <!--左边-->
        <div class="top-left">
          <img src="@/assets/images/user/user001.jpg" alt class="userImg" />
          <span class="zhengshu" @click="toPath">证书</span>
          <img class="zhengshuImg" src="@/assets/images/user/code-bg.png" alt="" @click="toPath">
          <div class="top-left-right">
            <div class="user-name">
              <img src="../../assets/images/user/to-greet.png" style="vertical-align: middle"/>
              <span>{{info.userName}}，您好~ </span>
              <el-button type="primary" style="background: #22944E;border-color: #22944E;vertical-align: middle" @click="tchu">退出登录</el-button>
            </div>
            <div class="user-tel">
              电话：{{info.tel || msgss}}
              <!--<div class="qutianxie" @click="recoveryList">-->
                <!--<img style="vertical-align: revert" src="@/assets/images/user/edit.png" alt="">-->
                <!--<span style="vertical-align: revert">修改个人信息</span>-->
              <!--</div>-->
            </div>
            <div class="user-gs">公司：{{companyInfo.companyName || msgss}}</div>
            <div class="user-zc">职称：{{info.job || msgss}}</div>
            <div class="user-wxh">微信号：{{info.wechat || msgss}}</div>
          </div>
        </div>
        <div class="top-right">
          <ul>
            <li v-for="(item,index) in list" :key="index" @click="indexs=index" :style="{borderRight:index==2 || index==5?'0':'',borderBottom:index==3 || index==4 || index==5?'0':''}">
              <p :style="{color:indexs==index?'#22944E':''}">{{item.title}}</p>
              <p :style="{color:indexs==index?'#22944E':''}">{{item.num}}</p>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div style="width: 100%;margin-top: 20px;">
      <integral v-if="indexs==0"></integral>
      <paperAnalysis v-if="indexs==1"></paperAnalysis>
      <myTask v-if="indexs==2"></myTask>
      <myCourse v-if="indexs==3"></myCourse>
      <myNote v-if="indexs==4"></myNote>
      <myViolation v-if="indexs==5"></myViolation>
      <myEcharts v-if="indexs==6"></myEcharts>
    </div>

   <!--个人信息修改弹窗-->
    <el-dialog title="个人信息修改" :visible.sync="userChangeShow">
      <el-form :model="form">
        <el-form-item label="姓名" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="用户性质" :label-width="formLabelWidth">
          <el-select v-model="form.userType" placeholder="请选择用户性质">
            <el-option label="企业用户" value="0"></el-option>
            <el-option label="学校用户" value="1"></el-option>
            <el-option label="环保局用户" value="2"></el-option>
            <el-option label="个人用户" value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所属企业" :label-width="formLabelWidth" v-if="form.userType==0">
          <el-select v-model="form.qiyeName" style="width: 100%;margin-bottom: 5px" placeholder="请选择" :popper-append-to-body="false"  popper-class="select-popper">
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.companyName"
              :value="item.id"
              @click="form.companyId=item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所属学校" :label-width="formLabelWidth" v-if="form.userType==1">
          <el-input v-model="form.schoolName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="职称" :label-width="formLabelWidth">
          <el-input v-model="form.job" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="userChangeShow = false">取 消</el-button>
        <el-button type="primary" @click="userChangeShow = false">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import integral from './integral'
  import paperAnalysis from './paperAnalysis'
  import myTask from './myTask'
  import myCourse from './myCourse'
  import myNote from './myNote'
  import myViolation from './myViolation'
  import myEcharts from './myEcharts'
  import {queryUserStatisticsInfo,queryUser,logout} from '@/request/api'
  import {getToken} from '@/request/auth'
  export default {
    components: {
      integral,
      paperAnalysis,
      myTask,
      myCourse,
      myNote,
      myViolation,
      myEcharts,
    },
    data () {
      return {
        activeName: "",
        info: {},
        user: {},
        indexs: 6,
        list: [
          {title: '我的积分',num:'0'},
          {title: '考试记录',num:'0'},
          {title: '错题报告',num:'0'},
          {title: '学习记录',num:'0'},
          {title: '我的笔记',num:'0'},
          {title: '我的学时',num:'0'},
        ],
        userChangeShow: false,//个人信息修改弹窗
        options: [],
        form: {},
        formLabelWidth: '120px',
        msgss: '未填写',
        companyInfo: {}//企业用户的企业信息
      }
    },
    created() {
      this.info = JSON.parse(localStorage.getItem('userInfo'))
//      获取所有企业信息
      this.options = JSON.parse(localStorage.getItem('comsList'))

      this.getInfo()
      this.getList()
    },
    methods: {
//        获取个人公司信息
      getInfo() {
          queryUser(this.info.id).then(res=> {
              if(res.code==200) {
                localStorage.setItem('userInfo',JSON.stringify(res.data.user))
//                  企业用户
                  if(res.data.user.userType==0) {
                    localStorage.setItem('companyInfo',JSON.stringify(res.data.companyInfo))
                    this.companyInfo = res.data.companyInfo
                  }else {
                    this.companyInfo = {}
                  }
              }
          })
      },
      //获取基本信息数据
      getList() {
        const loading = this.openLoading();
        var params = {
            "userId": this.info.id
        }
        queryUserStatisticsInfo(params).then(res=> {
          loading.close();
          if(res.code == 200) {
            this.list[0].num = res.data[0].integral || 0
            this.list[1].num = res.data[0].testRecords || 0
            this.list[2].num = res.data[0].wrongTopicReport || 0
            this.list[3].num = res.data[0].learningRecord || 0
            this.list[4].num = res.data[0].note || 0
            this.list[5].num = res.data[0].wrongTopicReport || 0

          }else {
            this.$message({
              message: '错误',
              type: 'warning',
              offset: '500'
            });
          }
        }).catch(() => {
          loading.close();
          this.$message({
            message: '错误',
            type: 'warning',
            offset: '500'
          });
        })
      },
//      打开修改个人信息弹窗
      recoveryList() {
        this.form = this.info
        if(JSON.stringify(this.info.companyInfo) != "{}") {
          this.form.qiyeName =  this.form.companyInfo.companyName
          this.form.companyId =  this.form.companyInfo.id
        }else {
          this.form.qiyeName =  this.options[0].companyName
          this.form.companyId =  this.options[0].id
        }
        this.userChangeShow =true
      },
      toPath() {
        this.$router.push({
          name:'certificate'
        })
      },
//      退出登录
      tchu() {
        this.$confirm('确定退出登录吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'info'
        }).then(() => {
          logout('token='+getToken()).then(res=> {
              if(res.code==200) {
                this.$message({
                  type: 'success',
                  message: '退出成功!',
                  offset: '500'
                });
                setTimeout(e=> {
                  localStorage.clear();
                  location.reload()
                },1500)
              }else {
                this.$message({
                  type: 'info',
                  message: '退出失败',
                  offset: '500'
                });
              }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消',
            offset: '500'
          });
        });
      }
    }
  }
</script>

<style scoped>
  #user {
    width:1200px;
    height:100%;
  }
  /*.userImg{*/
    /*position: absolute;*/
    /*top:-40px;*/
    /*left:calc( (100% - 100px)/2 );*/
  /*}*/
  .el-pagination {
    margin-top: 40px;
    text-align: center;
  }
  .left {
    width: 100%;
    height: auto;
    padding-top: 30px;
  }
  .left .top {
    width: 100%;
    height: 260px;
    background: #fff;
    box-sizing: border-box;
    font-size: 0;
  }
  .left .top .top-left {
    width: 50%;
    height: 100%;
    border-right: 1px solid #e5e5e5;
    box-sizing: border-box;
    display: inline-block;
    padding: 40px 30px;
    position: relative;
    vertical-align: middle;
  }
  .top-left .userImg {
    width: 140px;
    height: 180px;
    border-radius: 8px;
    vertical-align: middle;
    margin-right: 25px;
  }
  .top-left .zhengshu {
    position: absolute;
    left: 31px;
    top: 55px;
    font-size: 16px;
    color: #FFFFFF;
    z-index: 100;
    cursor: pointer;
  }
  .top-left .zhengshuImg {
    width: 52px;
    height: 32px;
    position: absolute;
    left: 25px;
    top: 50px;
    cursor: pointer;
  }
  .top-left .top-left-right {
    width: calc(100% - 165px);
    height: 100%;
    vertical-align: middle;
    display: inline-block;
  }
  .top-left .top-left-right .user-name span{
    vertical-align: middle;
    width: 254px;
    height: 20px;
    font-size: 20px;
    font-weight: bold;
    margin-left: 16px;
  }
  .top-left .top-left-right .user-tel {
    margin: 16px 0 20px;
    font-size: 20px;
  }
  .top-left .top-left-right .user-gs, .user-zc, .user-wxh {
    font-size: 16px;
    margin-bottom: 8px;
  }
  .qutianxie {
    display: inline-block;
    margin-left: 10px;
    color: #22944E;
  }
  .left .top .top-right {
    width: 50%;
    height: 100%;
    box-sizing: border-box;
    display: inline-block;
    vertical-align: middle;
  }
  .top-right ul {
    margin: 0;
    padding: 0;
  }
  .top-right ul li {
    width: 33.33%;
    display: inline-block;
    height: 130px;
    border-right: 1px solid #e5e5e5;
    border-bottom: 1px solid #e5e5e5;
    box-sizing: border-box;
    text-align: center;
    padding: 28px 0 34px;
    cursor: pointer;
  }
  .top-right ul li :first-child {
    font-size: 16px;
    color: #999999;
    margin-bottom: 16px;
  }
  .top-right ul li :last-child {
    font-size: 24px;
    font-weight: bold;
  }
  p{
    margin:0;
  }
  .userMessage{
    text-align: center;
  }
  .userMessage img{
    vertical-align: middle;
  }
  .userMessage>div span{
    height:40px;
    line-height:40px;
    font-size: 20px;
    font-weight: bold;
    margin-left:16px;
  }
  .userMessage div,.userMessage>p{
    font-size: 20px;
    color: #343434;
  }
  .left h6 {
    display: inline-block;
    float: left;
    color: #333;
    font-size: 16px;
    padding: 10px 0;
    line-height: 2em;
    margin-left: 16px;
    font-weight: 400;
  }
  .item {
    float:left;
    width: calc( 100%/6 );
    height: 80px;
    text-align: center;
    overflow: hidden;
    cursor:pointer;
  }
  .item span {
    display: block;
    margin-top: 10px;
    color: #999;
    font-size: 16px;
  }
  .item h3 {
    width: 100%;
    text-align: center;
    color: #333;
    font-size: 24px;
    margin-top: 6px;
  }
  .item .bottom {
    width: 100%;
    height: auto;
    padding: 30px;
    background: #fff;
    border-right: 4px;
    margin-top: 15px;
  }
  .right {
    width: 260px;
    height: 170px;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0px 4px 2px 0px rgba(0, 0, 0, 0.02),
    0px 4px 12px 0px rgba(0, 0, 0, 0.12);
    padding: 0 20px;
    overflow: hidden;
  }
  .usertop {
    height: 50px;
    line-height: 50px;
  }
  .right .usertop img {
    height: 20px;
    float: left;
    margin-top: 15px;
  }
  .right .usertop span {
    font-size: 15px;
    padding-left: 5px;
    color: #333;
  }
  /deep/
  .left h6 {
    margin-left: 0;
    margin-right: 10px;
  }
</style>
